<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Rent a Bike</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- for google maps -->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Le styles -->
	<link href="./css/bootstrap.css" rel="stylesheet">
	<link href="./css/custom.css" rel="stylesheet">

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

	<script src="./lib/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script src="./lib/bootstrap-dropdown.js" type="text/javascript"></script>
	<script src="./lib/bootstrap-modal.js" type="text/javascript"></script>
	<script src="./lib/bootstrap-alerts.js" type="text/javascript"></script> 
	<script src="./lib/prototype.js" type="text/javascript"></script>
	<script src="./lib/rentabike.js" type="text/javascript"></script>
</head>

<body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">Rent a Bike</a>
          <!-- Menu if logged out -->
          <div id="publicCustomer">
		      <ul class="nav" style="display:block;">
		      	<li class="bikeinfo"><a href="#bikeinfo" id="linkBikeInfo">FAQ</a></li>
		      	<li><a href="#registration" id="linkRegistered">Registered</a></li>
		      	<li class="stats"><a href="#stats">Stats</a></li>
		      </ul>
		      <form action="" class="pull-right" id="frmLogin">
		        <input class="input-small" type="text" name="txtUser" placeholder="Username">
		        <input class="input-small" type="password" name="txtPassword" placeholder="Password">
		        <button class="btn" type="submit">Sign in</button>
		      </form>
          </div>
          <!-- ENDE Menu if logged out -->
          <!-- Menu if logged in -->
          <div id="loggedinCustomer" style="display:none;">
          	<ul class="nav" style="display:block;">
		      	<li class="bikeinfo"><a href="#bikeinfo" id="linkBikeInfo">FAQ</a></li>
		      	<li><a href="#Rent" id="linkRent">Find a bike</a></li>
		      	<li><a href="#Return" id="linkReturn">Return</a></li>
		         <li class="dropdown" data-dropdown="dropdown" id="loggedinIsAdmin">
		          <a href="#" class="dropdown-toggle">Admin</a>
		        	  <ul class="dropdown-menu">
		            <li><a href="#Bikes" id="linkAdminBikes">Bikes</a></li>
		            <li><a href="#BikeCats" id="linkAdminBikeCats">Bike Categories</a></li>
		            <li><a href="#Invoices" id="linkAdminInvoice">Invoices</a></li>
		            <li><a href="#Customers" id="linkAdminCustomer">Customers</a></li>
		          </ul>
		        </li>
		        <li class="stats"><a href="#stats">Stats</a></li>
		        <li><a href="#contact" id='ajaxCounter'><!-- loaded dynamically --></a></li>
		      </ul>
		      <div class="pull-right">
		      	<ul class="nav" style="display:block;">
				  <li class="dropdown" data-dropdown="dropdown" id="loggedinIsAdmin">
				    	<a href="#" class="dropdown-toggle" id="displayCustomerName"><!-- dynamically add Customer Name--></a>
				    	<ul class="dropdown-menu">
				    		<li><a href="#Logout" id="linkLogout" onClick="JavaScript:clickLogout();">Logout</a></li>
				    	</ul>
				   </ul>
		      </div>
          </div>
          <!-- ENDE Menu if logged in -->
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">     
        <div id="template_page_header" style="display:none;">
          <h1>#{pagename}&nbsp;<small>#{description}</small></h1>
        </div>
        <div class="page-header" id="page_header">
          <!-- will be added dynamically -->
        </div>
        <div id="systemAlers">
        	<!-- will be added dynamically -->
        </div>
        <div class="row">
          <div class="span14" id="ajax_loader" style="display:none;"> <img src="img/ajax-loader.gif"> </div>
          <div class="span14" id="main_content">
          	Click any link in the toolback to begin<br><br><br><br><br><br><br><br><br><br><br><br>&nbsp;
          </div>
          <!--
          <div class="span4">
            <h3>Secondary content</h3>
          </div>
          -->
        </div>
      </div>

      <footer>
        <p>&copy; The Rent a Bike Company 2011</p>
      </footer>
	
	</div> <!-- /container -->
	
	
	
	
	
	
	<!--
	RENT
	-->
	<div style="display:none;">
		<textarea id="template_map">
			<form id='form_address'>
			<div class="span14" class="clearfix">
				<input class="span4" id="text_address" placeholder="Type your address here" name="text_address" type="text">&nbsp;<input type="submit" class="btn" value="Go"><br><br>
			</div>
			</form>
			<div id="map_canvas" class="span13" style="height: 600px"></div>
		</textarea>
	</div>
	
	
	<div style="display:none;">
		<textarea id="template_infowindow">
			<h3>#{bike_name} (#{bike_category})</h3>
			<p>
			#{bike_description}
			</p>
			<p>
			Price: #{bike_price} cent/minute<br>
			</p>
			<button class="btn primary" type="button" onclick="clickBook(#{bike_id})">Book now</button>
		</textarea>
	</div>
	
	<div style="display:none;">
		<textarea id="template_rent_confirm">
			<div class="row">
				<div class="span5">
					<h3>#{bike_name} (#{bike_category})</h3>
					<p>
						#{bike_description}
					</p>
					<p>
						<strong>Price: #{bike_price} cent per minute</strong>
					</p>
				</div>
				<div class="span9">
					<img class="thumbnail" height="160" src="#{bike_img_url}">&nbsp;&nbsp;&nbsp;&nbsp;
					<img class="thumbnail" height="200" src="http://maps.google.com/maps/api/staticmap?center=#{bike_position_lat},#{bike_position_long}&zoom=14&size=200x200&maptype=roadmap&markers=color:red|color:red|label:A|#{bike_position_lat},#{bike_position_long}&sensor=false">
				</div>
			</div>
			<form id='confirm_rent_form' class="form-stacked" onsubmit="onRentConfirm(event, #{bike_id});" style="margin: 0px -20px -38px -20px;"> 
				<fieldset>
					<div class="clearfix">
				      <p><label>Terms and conditions</label></p>
						<span class="label important">Important:</span>&nbsp;You have to return the bike within 24 hours!
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<input type="checkbox" name="optionsCheckboxes">
										<span>Yes, I have read and agree with <a href="#notworking">terms, conditions and privacy statement</a>.</span>
									</label>
								</li>
							</ul>
							<!--<span class="help-block">
								<strong>Note:</strong> Usage information will be handled with special care and exceptionally used within our company for optimizing our service.
							</span>-->
						</div>
			   	</div>
				</fieldset>
				<div class="actions">
					<button type="submit" class="btn primary">Rent now</button>&nbsp;<button class="btn" type="reset" onclick="onRentCancel()">Cancel</button>
				</div>
      	</form>
		</textarea>
	</div>
	
	
	<div style="display:none;">
		<textarea id="template_rent_success">
			<p><strong>Congratulations!</strong> You can now unlock the bike and drive away!<br>
			However, please remember to return the bike (at any location) within 24 hours.</p>
			<h3>Your unlock key: 7K4C3X</h3><br>
			<button class="btn success" type="button" onclick="onRentAfterConfirm()">Continue</button>
		</textarea>
	</div>
	
	<!--
	RETURN BIKE
	-->
	<div style="display:none;">
		<textarea id="template_return">
			<div class="row">
				<div class="span6">
					<h3>#{name} (#{category})</h3>
					<p>
						#{description}
					</p>
					<p>
						<strong>Price: #{price} cent per minute</strong>
					</p>
						<h3>Minutes rent: #{minutes_rent} minutes</h3>
						<h3>Current Price: #{current_total} EUR</h3>
				</div>
				<div class="span8">
					<img class="thumbnail" height="160" src="#{img_url}">&nbsp;&nbsp;&nbsp;&nbsp;
					<img class="thumbnail" height="200" src="http://maps.google.com/maps/api/staticmap?center=#{position_lat},#{position_long}&zoom=14&size=200x200&maptype=roadmap&markers=color:red|color:red|label:A|#{position_lat},#{position_long}&sensor=false">
				</div>
			</div>
			<form id='confirm_return_form' class="form-stacked" onsubmit="onReturnConfirm(event, #{id});" style="margin: 0px -20px -38px -20px;">
				<div class="actions">
					<button type="submit" class="btn primary">Return now</button><!--&nbsp;<button class="btn" type="reset" onclick="onReturnCancel()">Cancel</button>-->
				</div>
      	</form>
		</textarea>
	</div>
	
	<div style="display:none;">
		<textarea id="template_return_success">
			<p><strong>Thank you!</strong> Your bike is now returned!<br>
			We hope you liked it and would be glad to see you again.</p>
			<button class="btn success" type="button" onclick="onReturnAfterConfirm()">Continue</button>
		</textarea>
	</div>
	
	<div style="display:none;">
		<textarea id="template_return_no_bike">
			<!--<p><strong>Sorry!</strong> There is no bike to return!</p>-->
			<button class="btn success" type="button" onclick="onRentAfterConfirm()">Continue</button>
		</textarea>
	</div>
	
	<!--
	BIKE INFO TEMPLATE
	-->
	<div style="display:none;">
		<textarea id="template_table_bikeinfo">
			<h3>How it works</h3>
			<p>Click on rent, zoom to your location and click on a bike near you to book it.</p>
			<h3>Our Bikes</h3>
			<table class="bordered-table zebra-striped">
				<thead><tr><th>&nbsp;</th><th>Name</th><th>Type</th><th>Description</th></tr></thead>
				<tbody>
				  #{rows}
				</tbody>
			</table>
		</textarea>
	</div>
	 
	<div style="display:none;">
		<textarea id="template_row_bikeinfo">
			<tr>
				<td><img class="thumbnail" height="40" src="#{img_url}"></td>
				<td>#{name}</td>
				<td>#{category}</td>
				<td>#{description}</td>
			</tr>
		</textarea>
	</div>
	<!--
	END BIKE INFO TEMPLATE
	-->
	
	<!--
	BIKE ADMIN TEMPLATE
	-->
	<div style="display:none;">
		<textarea id="template_table_bike">
			<button class="btn primary" id='button_new_bike'>New Bike</button>
			<br><br>
			<table class="bordered-table zebra-striped">
				<thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Image</th><th>&nbsp;</th></tr></thead>
				<tbody>
				  #{rows}
				</tbody>
			</table>
		</textarea>
	</div>
	 
	<div style="display:none;">
		<textarea id="template_row_bike">
			<tr>
				<td>#{name}</td>
				<td>#{category}</td>
				<td>#{description}</td>
				<td><img class="thumbnail" height="40" src="#{img_url}" title="#{img_url}"></td>
				<td><button id="button_delete_bike" name="button_delete_bike" title="#{id}" class="btn primary">delete</button></td>
			</tr>
		</textarea>
	</div>
	<!--
	END BIKE ADMIN TEMPLATE
	-->
	
	<!--
	NEW BIKE MODAL
	-->
	<div id="modal_new_bike" class="modal hide fade" style="display: none; ">
		<form id='new_bike_form'>
		<div class="modal-header">
			<a href="#" class="close">×</a>
			<h3>New Bike</h3>
		</div>
		<div class="modal-body">
			<div id="ajax_loader_modal_bike" style="display:none;">
				<img src="img/ajax-loader.gif">
			</div>
			<fieldset>
				<div class="clearfix">
					<label for="name">Bike name</label>
					<div class="input">
						<input class="span4" id="new_bike_name" name="new_bike_name" type="text">
					</div>
				</div>
				<div class="clearfix">
					<label for="description">Description</label>
					<div class="input">
						<input class="span4" id="new_bike_description" name="new_bike_description" type="text">
					</div>
				</div>
				<div class="clearfix">
					<label for="description">Image URL</label>
					<div class="input">
						<input class="span4" id="new_bike_url" name="new_bike_url" type="text">
					</div>
				</div>
				<div class="clearfix">
					<label id="optionsRadio">Category</label>
					<div class="input">
						<ul class="inputs-list" id="new_bike_cat_div">
							<!-- Categories loaded dynamically -->
						</ul>
					</div>
				</div>
			</fieldset>
		</div>
		<div class="modal-footer">
			<input type="submit" class="btn primary" value="Add bike">&nbsp;
			<button type="reset" id="new_bike_cancel" class="btn">Cancel</button>
		</div>
		</form>
	</div>
	
	<div style="display:none;">
		<textarea id="template_radio_bikecat">
			<li>
				<label>
					<input type="radio" id="new_bike_cat" name="new_bike_cat" value="#{id}">
					<span>#{name} (#{price} cents/minute)</span>
				</label>
			</li>
		</textarea>
	</div>
	<!--
	END NEW BIKE MODAL
	-->
	
	
	
	
	<!--
	BIKE-CAT ADMIN TEMPLATE
	-->
	<div style="display:none;">
		<textarea id="template_table_bikecat">
			<button class="btn primary" id='button_new_bikecat'>New Category</button>
			<br><br>
			<table class="bordered-table zebra-striped">
				<thead><tr><th>Name</th><th>Description</th><th>Price</th><th>&nbsp;</th></tr></thead>
				<tbody>
				  #{rows}
				</tbody>
			</table>
		</textarea>
	</div>
	 
	<div style="display:none;">
		<textarea id="template_row_bikecat">
			<tr>
				<td>#{name}</td><td>#{description}</td><td>#{price}</td>
				<td><button id="button_delete_bikecat" name="button_delete_bikecat" title="#{id}" class="btn primary">delete</button></td>
			</tr>
		</textarea>
	</div>
	<!--
	END BIKE-CAT ADMIN TEMPLATE
	-->
	
	<!--
	NEW BIKE-CAT MODAL
	-->
	<div id="modal_new_bikecat" class="modal hide fade" style="display: none; ">
		<form id='new_bikecat_form'>
		<div class="modal-header">
			<a href="#" class="close">×</a>
			<h3>New Bike Category</h3>
		</div>
		<div class="modal-body">
			<div id="ajax_loader_modal_bikecat" style="display:none;">
				<img src="img/ajax-loader.gif">
			</div>
			<fieldset>
				<div class="clearfix">
					<label for="name">Category name</label>
					<div class="input">
						<input class="span4" id="new_bikecat_name" name="new_bikecat_name" type="text">
					</div>
				</div>
				<div class="clearfix">
					<label for="description">Description</label>
					<div class="input">
						<input class="span4" id="new_bikecat_description" name="new_bikecat_description" type="text">
					</div>
				</div>
				<div class="clearfix">
					<label for="description">Price (cents per minute)</label>
					<div class="input">
						<input class="span4" id="new_bikecat_price" name="new_bikecat_price" type="text">
					</div>
				</div>
			</fieldset>
		</div>
		<div class="modal-footer">
			<input type="submit" class="btn primary" value="Add bike">&nbsp;
			<button type="reset" id="new_bikecat_cancel" class="btn">Cancel</button>
		</div>
		</form>
	</div>
	<!--
	END NEW BIKE-CAT MODAL
	-->

	
	<!--
	CUSTOMER ADMIN TEMPLATE
	-->
	<div style="display:none;">
		<textarea id="template_table_customer">
			<button class="btn primary" id='button_new_customer' onclick="JavaScript:clickNewCustomer();">Create Customer</button>
			<br><br>
			<table class="bordered-table zebra-striped">
				<thead><tr><th>Name</th><th>Address</th><th>&nbsp;</th></tr></thead>
				<tbody>
				  #{rows}
				</tbody>
			</table>
		</textarea>
	</div>
	 
	<div style="display:none;">
		<textarea id="template_row_customer">
			<tr>
				<td>#{name}</td>
				<td>#{address}</td>
				<td><button id="button_delete_customer" name="button_delete_customer" onClick="JavaScript:clickDeleteCustomer(#{id});" class="btn primary">delete</button> <button id="button_updates_customer" name="button_update_customer" onClick="JavaScript:clickUpdateCustomer(#{id});" class="btn primary">update</button></td>
			</tr>
		</textarea>
	</div>
	<!--
	END CUSTOMER ADMIN TEMPLATE
	-->	
	<!--
	NEW FORM: CUSTOMER
	-->
	<!-- Prototype render the From in the viewer div -->
	<div id="modal_customer_viewer" class="modal hide fade" style="display: none; "></div>
	<div id="modal_customer" class="modal hide fade" style="display: none; ">
		<form id='new_customer_form_#{action_label}'>
		<div class="modal-header">
			<a href="#" class="close">×</a>
			<h3>#{action_label} Customer</h3>
		</div>
		<div class="modal-body">
			<div id="ajax_loader_customer" style="display:none;">
				<img src="img/ajax-loader.gif">
			</div>
			<fieldset>
			
				<div class="clearfix" style="display:none;">
					<label for="txtCustomerId">Customer ID</label>
					<div class="input">
						<input class="span4" id="txtCustomerId" name="txtCustomerId" type="text" value="#{id}">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtCustomerName">Name</label>
					<div class="input">
						<input class="span4" id="txtCustomerName" name="txtCustomerName" type="text" value="#{name}">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtPassword">Password</label>
					<div class="input">
						<input class="span4" id="txtPassword" name="txtPassword" type="text" value="#{password}">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtAddress">Address</label>
					<div class="input">
						<input class="span4" id="txtAddress" name="txtAddress" type="text" value="#{address}">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtIsAdmin">Admin</label>
				    <div class="input">
				      <label class="add-on active"><input type="checkbox" name="txtIsAdmin" id="txtIsAdmin" value="true" #{isadmin}></label>
				    </div>
				</div>				
			</fieldset>
		</div>
		<div class="modal-footer">
			<input type="submit" class="btn primary" value="#{action_label} Customer" onClick="JavaScript:formCustomer(event, '#{action_label}');">&nbsp;
			<button type="reset" id="new_customer_cancel" class="btn" onClick="JavaScript:jQuery('#modal_customer_viewer').modal('hide');">Cancel</button>
		</div>
		</form>
	</div>
	<!--
	END FORM: CUSTOMER
	-->
	<!--
	NEW FORM: Registration
	-->
	<!-- Prototype render the From in the viewer div -->
	
	<form id='form_registered' style="display:none;">
			<fieldset>
				<div class="clearfix">
					<label for="txtRegCustomerName">Name</label>
					<div class="input">
						<input class="xlarge" id="txtRegCustomerName" name="txtRegCustomerName" type="text" value="">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtRegPassword">Password</label>
					<div class="input">
						<input class="xlarge" id="txtRegPassword" name="txtRegPassword" type="text" value="">
					</div>
				</div>
				<div class="clearfix">
					<label for="txtRegAddress">Address</label>
					<div class="input">
						<input class="xlarge" id="txtRegAddress" name="txtRegAddress" type="text" value="">
					</div>
				</div>				
			</fieldset>
		<div class="actions">
			<input type="submit" class="btn primary" value="Registered now" onClick="JavaScript:form_registered(event);">&nbsp;
			<button type="reset" id="form_registered_cancel" class="btn" onClick="JavaScript:loadBikeInfo();">Cancel</button>
		</div>
	</form>
	<!--
	END FORM: Registration
	-->
	<!--
	INVOICE ADMIN TEMPLATE
	-->
	<div style="display:none;">
		<textarea id="template_table_invoice">
			<!-- <button class="btn primary" id='button_new_customer' onclick="JavaScript:clickNewCustomer();">Create Customer</button> -->
			<!-- <form id="frmFilterInvoice">
			 <div class="clearfix">
		        <label for="txtStatus"></label>
				    <div class="input">
				      <select name="txtStatus" id="txtStatus">
				      	<option value="0">currently awarded</option>
				        <option value="1">paid invoice</option>
				        <option value="2">unpaid invoice</option>
				        <option value="3">reminded invoice</option>
				      </select>
				      <button class="btn primary" id='button_filter_invoice' onclick="JavaScript:clickFilterInvoice();">Filter</button>
				    </div>
		      </div>
		      
			</form> -->
			<br><br>
			<table class="bordered-table zebra-striped">
				<thead>
					<tr>
						<!-- <th>Status</th> -->
						<th>Customer</th>
						<th>Bike</th>
						<th>Bike Category</th>
						<th>Start</th>
						<th>End</th>
						<th>Duration (in minutes)</th>
						<th>Amount (in €)</th>
						<th>&nbsp;</th>
					</tr>
				</thead>
				<tbody>
				  #{rows}
				</tbody>
			</table>
		</textarea>
	</div>
	 
	<div style="display:none;">
		<textarea id="template_row_invoice">
			<tr>
				<!-- <td class='status_#{status_class}'>#{status}</td> -->
				<td>#{customername}</td>
				<td>#{bikename}</td>
				<td>#{bikecatname}</td>
				<td>#{start}</td>
				<td>#{end}</td>
				<td>#{duration}</td>
				<td>#{amount}</td>
				<td>
					<button id="button_print_invoice" name="button_print_invoice" onClick="JavaScript:clickPrintInvoice(#{id});" class="btn primary">invoice</button> 
					<button id="button_print_dun" name="button_print_dun" onClick="JavaScript:clickPrintDun(#{id});" class="btn primary">dun</button>
				</td>
			</tr>
		</textarea>
	</div>
	<!--
	END INVOICE ADMIN TEMPLATE
	-->		
</body>

</html>

